<script lang="ts" setup>
import { computed, ref, watch } from 'vue';

import { IconifyIcon } from '@vben/icons';

import { Button, Input, Modal } from 'ant-design-vue';

interface Props {
  value?: string;
}

interface Emits {
  (e: 'update:value', value: string): void;
  (e: 'change', value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const selectedIcon = ref(props.value || '');
const showIconPicker = ref(false);
const searchKeyword = ref('');

// 图标分类
const iconCategories = [
  {
    name: 'common',
    title: '常用图标',
    icons: [
      'ant-design:home-outlined',
      'ant-design:user-outlined',
      'ant-design:setting-outlined',
      'ant-design:database-outlined',
      'ant-design:file-outlined',
      'ant-design:folder-outlined',
      'ant-design:star-outlined',
      'ant-design:heart-outlined',
      'ant-design:like-outlined',
      'ant-design:dislike-outlined',
    ],
  },
  {
    name: 'business',
    title: '业务图标',
    icons: [
      'ant-design:shop-outlined',
      'ant-design:car-outlined',
      'ant-design:plane-outlined',
      'ant-design:train-outlined',
      'ant-design:coffee-outlined',
      'ant-design:medicine-box-outlined',
      'ant-design:scissor-outlined',
      'ant-design:fire-outlined',
      'ant-design:environment-outlined',
      'ant-design:apartment-outlined',
    ],
  },
  {
    name: 'tools',
    title: '工具图标',
    icons: [
      'ant-design:tool-outlined',
      'ant-design:build-outlined',
      'ant-design:experiment-outlined',
      'ant-design:bulb-outlined',
      'ant-design:rocket-outlined',
      'ant-design:thunderbolt-outlined',
      'ant-design:fire-outlined',
      'ant-design:water-outlined',
      'ant-design:cloud-outlined',
      'ant-design:sun-outlined',
    ],
  },
  {
    name: 'data',
    title: '数据图标',
    icons: [
      'ant-design:bar-chart-outlined',
      'ant-design:line-chart-outlined',
      'ant-design:pie-chart-outlined',
      'ant-design:table-outlined',
      'ant-design:database-outlined',
      'ant-design:code-outlined',
      'ant-design:api-outlined',
      'ant-design:cloud-server-outlined',
      'ant-design:laptop-outlined',
      'ant-design:mobile-outlined',
    ],
  },
];

// 过滤后的图标分类
const filteredIconCategories = computed(() => {
  if (!searchKeyword.value) {
    return iconCategories;
  }

  return iconCategories
    .map((category) => ({
      ...category,
      icons: category.icons.filter((icon) =>
        icon.toLowerCase().includes(searchKeyword.value.toLowerCase()),
      ),
    }))
    .filter((category) => category.icons.length > 0);
});

const selectIcon = (icon: string) => {
  selectedIcon.value = icon;
  emit('update:value', icon);
  emit('change', icon);
};

const selectIconFromPicker = (icon: string) => {
  selectedIcon.value = icon;
  emit('update:value', icon);
  emit('change', icon);
  showIconPicker.value = false;
};

const handleIconChange = (e: any) => {
  const value = e.target.value;
  selectedIcon.value = value;
  emit('update:value', value);
  emit('change', value);
};

const handleSearch = (e: any) => {
  searchKeyword.value = e.target.value;
};

watch(
  () => props.value,
  (newValue) => {
    selectedIcon.value = newValue || '';
  },
);
</script>

<template>
  <div class="icon-selector">
    <div class="icon-input">
      <div class="input-wrapper">
        <Input
          v-model:value="selectedIcon"
          placeholder="请选择图标"
          @change="handleIconChange"
          readonly
          @click="showIconPicker = true"
          class="icon-input-field"
        />
        <div v-if="selectedIcon" class="icon-preview">
          <IconifyIcon :icon="selectedIcon" :size="18" />
        </div>
        <Button
          type="text"
          size="small"
          @click="showIconPicker = true"
          class="icon-picker-btn"
        >
          <IconifyIcon icon="ant-design:setting-outlined" :size="14" />
        </Button>
      </div>
    </div>

    <!-- 图标选择弹窗 -->
    <Modal
      v-model:open="showIconPicker"
      title="选择图标"
      width="600px"
      :footer="null"
      @cancel="showIconPicker = false"
    >
      <div class="icon-picker-content">
        <div class="icon-search">
          <Input
            v-model:value="searchKeyword"
            placeholder="搜索图标..."
            @change="handleSearch"
          />
        </div>

        <div class="icon-grid">
          <div
            class="icon-category"
            v-for="category in filteredIconCategories"
            :key="category.name"
          >
            <div class="category-title">{{ category.title }}</div>
            <div class="icon-list">
              <div
                v-for="icon in category.icons"
                :key="icon"
                class="icon-item"
                :class="{ active: selectedIcon === icon }"
                @click="selectIconFromPicker(icon)"
                :title="icon"
              >
                <IconifyIcon :icon="icon" :size="16" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<style lang="less" scoped>
.icon-selector {
  .icon-input {
    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;

      .icon-input-field {
        flex: 1;
        padding-right: 80px;
      }

      .icon-preview {
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        background: #f5f5f5;
        border: 1px solid #d9d9d9;
        color: #666;
      }

      .icon-picker-btn {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        padding: 2px 6px;
        height: 24px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        background: white;
        color: #666;

        &:hover {
          border-color: #1890ff;
          color: #1890ff;
        }
      }
    }
  }

  .icon-picker-content {
    .icon-search {
      margin-bottom: 16px;
    }

    .icon-grid {
      max-height: 400px;
      overflow-y: auto;

      .icon-category {
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .category-title {
          font-weight: 500;
          margin-bottom: 8px;
          color: #666;
          font-size: 12px;
          text-transform: uppercase;
        }

        .icon-list {
          display: grid;
          grid-template-columns: repeat(8, 1fr);
          gap: 4px;

          .icon-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
              border-color: #1890ff;
              background: #f0f8ff;
            }

            &.active {
              border-color: #1890ff;
              background: #e6f7ff;
              color: #1890ff;
            }
          }
        }
      }
    }
  }
}
</style>
